<template>
  <div class="pro_container">
    <div class="back_btn">
      <svg
        class="cursor_poi"
        @click="goBack"
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
        fill="none">
        <path
          d="M11.2932 8.89258C11.6838 8.50247 12.3169 8.50224 12.7073 8.89258C13.0975 9.28299 13.0973 9.91615 12.7073 10.3066L8.01294 15H20.5032L20.6047 15.0049C21.1091 15.0559 21.5032 15.4821 21.5032 16C21.5031 16.5178 21.1091 16.9441 20.6047 16.9951L20.5032 17H8.01489L12.7073 21.6924C13.0975 22.0828 13.0973 22.7159 12.7073 23.1064C12.3168 23.4969 11.6837 23.4969 11.2932 23.1064L4.89282 16.707C4.50242 16.3166 4.50251 15.6835 4.89282 15.293L11.2932 8.89258ZM25.5999 8.59961C26.1521 8.59961 26.5998 9.0474 26.5999 9.59961V22.3994C26.5999 22.9517 26.1521 23.3994 25.5999 23.3994C25.0476 23.3994 24.5999 22.9517 24.5999 22.3994V9.59961C24.5999 9.04744 25.0477 8.59967 25.5999 8.59961Z"
          fill="#222222" />
      </svg>
    </div>
    <div id="content_detail" class="flex_row">
      <div class="left-panel">
        <div class="flex_row">
          <div class="flex_col pl-[24px]">
            <div
              @click="changeImg(item, index)"
              :key="item.id"
              :class="['left_img_view', 'cursor_poi', activeImgIndex === index && 'img_border']"
              v-for="(item, index) in imgList">
              <img :src="item.url" class="left_img" alt="" />
            </div>
          </div>
          <div class="ml-[32px] swiper_view">
            <el-carousel
              ref="carousel"
              :interval="2000"
              :initial-index="activeImgIndex"
              :activeIndex="activeImgIndex"
              height="784px"
              @change="changeCarousel"
              indicator-position="none"
              arrow="never">
              <el-carousel-item
                v-for="(item, index) in imgList"
                :key="item.id"
                class="carousel_item">
                <img :src="item.url" class="img_carousel_item" alt="" />
              </el-carousel-item>
            </el-carousel>
            <div @click="changeSwiperItem('left')" class="left_swiper_btn cursor_poi">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="56"
                height="56"
                viewBox="0 0 56 56"
                fill="none">
                <g clip-path="url(#clip0_1812_48365)">
                  <circle cx="28" cy="28" r="28" fill="black" fill-opacity="0.32" />
                  <path
                    d="M33 18L23 28L33 38"
                    stroke="white"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_1812_48365">
                    <rect width="56" height="56" fill="white" />
                  </clipPath>
                </defs>
              </svg>
            </div>
            <div @click="changeSwiperItem('right')" class="right_swiper_btn cursor_poi">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="56"
                height="56"
                viewBox="0 0 56 56"
                fill="none">
                <g clip-path="url(#clip0_1812_48364)">
                  <circle cx="28" cy="28" r="28" fill="black" fill-opacity="0.32" />
                  <path
                    d="M23 18L33 28L23 38"
                    stroke="white"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_1812_48364">
                    <rect width="56" height="56" fill="white" />
                  </clipPath>
                </defs>
              </svg>
            </div>
          </div>
        </div>
        <div class="mt-[24px]">
          <div class="tab_view">
            <div
              @click="changTab(item)"
              :class="[
                'ml-[40px]',
                'cursor_poi',
                item.id === activeTab ? 'base_active_tab_item' : 'base_tab_item',
              ]"
              v-for="item in detailTab"
              :key="item.id">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="tab_content">
          <Description v-if="activeTab === 1" :productDetail="productDetail" />
          <ProductInfo v-if="activeTab === 2" :productDetail="productDetail" />
        </div>
      </div>
      <div class="right-panel">
        <div class="goods_title">
          {{ productDetail?.title }}
        </div>
        <div class="price mt-[24px]">
          <span>$</span>
          <span class="f-s-32">{{ productDetail?.price }}</span>
        </div>
        <div class="mt-[24px] flex_row">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none">
            <path
              d="M20 3.25C21.5188 3.25 22.75 4.48122 22.75 6V16C22.75 17.5188 21.5188 18.75 20 18.75H19.7393C19.6116 20.4281 18.2108 21.75 16.5 21.75C14.7892 21.75 13.3884 20.4281 13.2607 18.75H10.7393C10.6116 20.4281 9.21077 21.75 7.5 21.75C5.78923 21.75 4.38844 20.4281 4.26074 18.75H4C2.48122 18.75 1.25 17.5188 1.25 16V12.3252C1.25 11.9553 1.36743 11.595 1.58496 11.2959L5.09375 6.4707C5.42298 6.01802 5.94906 5.75014 6.50879 5.75H8.16699C8.21276 5.74983 8.24983 5.71276 8.25 5.66699C8.25 4.3323 9.3323 3.25 10.667 3.25H20ZM7.5 16.75C6.5335 16.75 5.75 17.5335 5.75 18.5C5.75 19.4665 6.5335 20.25 7.5 20.25C8.4665 20.25 9.25 19.4665 9.25 18.5C9.25 17.5335 8.4665 16.75 7.5 16.75ZM16.5 16.75C15.5335 16.75 14.75 17.5335 14.75 18.5C14.75 19.4665 15.5335 20.25 16.5 20.25C17.4665 20.25 18.25 19.4665 18.25 18.5C18.25 17.5335 17.4665 16.75 16.5 16.75ZM10.667 4.75C10.1607 4.75 9.75 5.16073 9.75 5.66699C9.74982 6.54118 9.04118 7.24982 8.16699 7.25H6.50879C6.429 7.25014 6.3536 7.28802 6.30664 7.35254L2.79785 12.1777C2.76678 12.2205 2.75 12.2724 2.75 12.3252V16C2.75 16.6904 3.30964 17.25 4 17.25H4.5C4.98986 16.0757 6.14815 15.25 7.5 15.25C8.85185 15.25 10.0101 16.0757 10.5 17.25H13.5C13.9899 16.0757 15.1482 15.25 16.5 15.25C17.8519 15.25 19.0101 16.0757 19.5 17.25H20C20.6904 17.25 21.25 16.6904 21.25 16V6C21.25 5.30964 20.6904 4.75 20 4.75H10.667ZM9 7.75C9.41421 7.75 9.75 8.08579 9.75 8.5V11.5C9.75 12.4665 8.9665 13.25 8 13.25H5C4.58579 13.25 4.25 12.9142 4.25 12.5C4.25 12.0858 4.58579 11.75 5 11.75H8C8.13807 11.75 8.25 11.6381 8.25 11.5V8.5C8.25 8.08579 8.58579 7.75 9 7.75Z"
              fill="#7A7A7A" />
          </svg>
          <span class="ml-[8px] free_ship">Free Shipping</span>
        </div>
        <svg
          class="mt-[24px]"
          xmlns="http://www.w3.org/2000/svg"
          width="684"
          height="2"
          viewBox="0 0 684 2"
          fill="none">
          <path d="M0 1H684" stroke="#EDEDED" />
        </svg>
        <div class="mt-[24px]">
          <span class="size_title">Size</span>
          <div class="size_view">
            <div class="size_item" v-for="sizeItem in sizeList" :key="sizeItem.id">
              {{ sizeItem.name }}
            </div>
          </div>
        </div>
        <div @click="goDesign" class="mt-[80px] buy_btn cursor_poi" v-hover-gradient>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none">
            <path
              d="M7.80331 1.06768C7.84354 0.849329 8.15646 0.849329 8.19669 1.06768L9.21955 6.62C9.23458 6.70159 9.29842 6.76542 9.38 6.78045L14.9323 7.80331C15.1507 7.84354 15.1507 8.15646 14.9323 8.19669L9.38 9.21955C9.29842 9.23458 9.23458 9.29842 9.21955 9.38L8.19669 14.9323C8.15646 15.1507 7.84354 15.1507 7.80331 14.9323L6.78045 9.38C6.76542 9.29842 6.70158 9.23458 6.62 9.21955L1.06768 8.19669C0.849329 8.15646 0.849329 7.84354 1.06768 7.80331L6.62 6.78045C6.70159 6.76542 6.76542 6.70158 6.78045 6.62L7.80331 1.06768Z"
              fill="white" />
          </svg>
          <span class="mr-[8px] ml-[8px]">Design Now</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none">
            <path
              d="M7.80331 1.06768C7.84354 0.849329 8.15646 0.849329 8.19669 1.06768L9.21955 6.62C9.23458 6.70159 9.29842 6.76542 9.38 6.78045L14.9323 7.80331C15.1507 7.84354 15.1507 8.15646 14.9323 8.19669L9.38 9.21955C9.29842 9.23458 9.23458 9.29842 9.21955 9.38L8.19669 14.9323C8.15646 15.1507 7.84354 15.1507 7.80331 14.9323L6.78045 9.38C6.76542 9.29842 6.70158 9.23458 6.62 9.21955L1.06768 8.19669C0.849329 8.15646 0.849329 7.84354 1.06768 7.80331L6.62 6.78045C6.70159 6.76542 6.76542 6.70158 6.78045 6.62L7.80331 1.06768Z"
              fill="white" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick, onUnmounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { throttle } from 'lodash';
  import Description from '@/views/product/components/Description.vue';
  import ProductInfo from '@/views/product/components/ProductInfo.vue';
  import { FeedsAPI, ProductDetailParams, ProductItem } from '@/api/feeds';
  const route: any = useRoute();
  const router = useRouter();
  interface ImageItem {
    url: string;
    id: number;
  }
  interface DetailTabItem {
    name: string;
    id: number;
  }
  const carousel: any = ref(null);
  const activeImgIndex = ref<number>(0);
  const detailTab = ref<DetailTabItem[]>([
    { id: 1, name: 'Description' },
    { id: 2, name: 'Product Info' },
  ]);
  const productDetail = ref<ProductItem>({ product_id: '' });
  const activeTab = ref<number>(1);
  const imgList = ref<ImageItem[]>([]);

  const sizeList = ref<any>([{ id: 1, name: '6.7"x4.7"' }]);

  onMounted(() => {
    getDetail();
  });

  const getDetail = async () => {
    const { product_id } = route.query;
    const params: ProductDetailParams = { product_id };
    const { code, data } = (await FeedsAPI.getProductDetail(params)) || { product_id };
    if (code === 200) {
      productDetail.value = data || {};
      imgList.value =
        data?.imgs?.map((item: any, index: number) => {
          return { url: item, id: index };
        }) || [];
    }
  };

  const changTab = (item: DetailTabItem) => {
    activeTab.value = item.id;
  };

  const goDesign = () => {
    const { product_id, template_id, product_url } = route.query;
    router.push({
      path: '/product/3dPhoto',
      query: { template_id, product_url, product_id, title: productDetail.value?.title },
    });
  };

  const changeImg = (item: ImageItem, index: number) => {
    activeImgIndex.value = index;
    carousel.value.setActiveItem(index);
  };

  const changeCarousel = (activeIndex: number) => {
    activeImgIndex.value = activeIndex;
  };

  const changeSwiperItem = (type: 'left' | 'right') => {
    const imgLength = imgList.value.length;
    const activeIndex = activeImgIndex.value;
    if (type === 'left') {
      activeImgIndex.value = activeIndex > 0 ? activeIndex - 1 : imgLength - 1;
    } else {
      activeImgIndex.value = activeIndex >= imgLength - 1 ? 0 : activeIndex + 1;
    }
    console.log(activeImgIndex.value);
    carousel.value.setActiveItem(activeImgIndex.value);
  };

  const goBack = () => {
    router.back();
  };
</script>

<style scoped lang="scss">
  #content_detail {
    width: 100%;
  }
  .pro_container {
    display: flex;
    width: 100%;
    height: 100vh; /* 占满整个视口高度 */
    background: #fff;
  }
  .tab_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .active_tab_item {
    padding: 12px 0;
    color: var(---, #f76b1b);

    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-bottom: 2px solid #f76b1b;
  }
  .tab_item {
    padding: 12px 0;
    color: var(---, #7a7a7a);

    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-bottom: 2px solid #fff;
  }
  .back_btn {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 24px;
  }

  /* 左侧栏 - 可滚动 */
  .left-panel {
    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
    overflow-x: hidden; /* 禁止水平滚动 */
    padding-top: 80px;
  }
  .img_border {
    border: 2px solid #f76b1b;
  }

  /* 右侧栏 - 禁止滚动 */
  .right-panel {
    padding: 80px 24px 20px 24px;
    overflow: hidden; /* 禁止所有滚动 */
    flex: 1;
    .goods_title {
      color: var(---9, #222);

      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }
    .buy_btn {
      border-radius: 8px;
      background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
      backdrop-filter: blur(2px);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 9px 0;
      color: var(---0, #fff);

      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .size_view {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .size_item {
      border-radius: var(--Number-3, 8px);
      border: 1px solid var(---, #f76b1b);
      background: var(---, #fbe6db);
      padding: 10px 14px;
      color: var(---, #f76b1b);

      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-right: 8px;
      margin-top: 8px;
    }
    .size_title {
      color: var(---9, #222);

      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .price {
      color: var(---9, #222);

      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }
    .free_ship {
      color: var(---6, #7a7a7a);

      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .f-s-32 {
      font-size: 32px;
    }
  }

  .cursor_poi {
    cursor: pointer;
  }
  .tab_content {
    max-width: 980px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .swiper_view {
    width: 784px;
    height: 784px;
    position: relative;
    .carousel_item {
      width: 784px;
      height: 784px;
      background: #f8f8f8;
      border-radius: 8px;
      overflow: hidden;
    }
    .img_carousel_item {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8px;
    }
    .left_swiper_btn {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translate(0%, -50%);
    }
    .right_swiper_btn {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translate(0%, -50%);
    }
  }
  .flex_row {
    display: flex;
    flex-direction: row;
  }
  .flex_col {
    display: flex;
    flex-direction: column;
  }
  .left_img_view {
    width: 140px;
    height: 140px;
    border-radius: 8px;
    overflow: auto;
    margin-bottom: 8px;
  }
  .left_img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
  }
</style>
